//使用ajax访问api接口获取数据完成显示
$(function () {
    loadAllStuMsg()
})

/**
 * 清空查询输入框的内容
 */
$('#btn_clear').click(function () {
    // 清空输入框内容
    $('#input_name').val('');
});

/**
 * 查询所有学生信息
 */
function loadAllStuMsg() {
    $.ajax({
        url: "/api/student/list"

    }).done(function (data) {
        console.log(data)
        let html = "";
        data.forEach((element, index) => {
            html += "<tr>"
            html += "<td>" + element.id + "</td>"
            html += "<td>" + element.name + "</td>"
            html += "<td>" + element.age + "</td>"
            html += "<td>" + (element.sex === 1 ? '男' : (element.sex === 2 ? '女' : '未知')) + "</td>"
            html += "<td>" + element.password + "</td>"
            html += "<td>" + element.sno + "</td>"
            //element.id 是一个动态值，每行数据的 id 都不同，需要通过字符串拼接插入到 HTML 中。
/*            html += "<td> <a href='#' onclick='showStuInsertOrUpdateDialog(" + element.id + ")' >编辑</a> &nbsp;&nbsp;" +
                "<a href='#' onclick='deleteStuById(" + element.id + ")' >删除</a></td>"
            html += "<tr>"*/
            // 添加操作按钮
            html += "<td>&nbsp;&nbsp;";
            html += "<button type='button' class='layui-btn layui-btn-sm layui-btn-primary' onclick='showStuInsertOrUpdateDialog(" + element.id + ")'>";
            html += "<i class='layui-icon layui-icon-edit'>&nbsp;编辑</i>";
            html += "</button> &nbsp;&nbsp;";
            html += "<button type='button' class='layui-btn layui-btn-sm layui-btn-danger' onclick='deleteStuById(" + element.id + ")'>";
            html += "<i class='layui-icon layui-icon-delete'>&nbsp;删除</i>";
            html += "</button>";

            html += "</td>";
            html += "</tr>";
        })

        $("#studentList").html(html)
    })
}

/**
 * 根据学生姓名模糊查询-查询按钮响应
 */
$("#btn_query").click(function () {
    // 获取输入框的值
    let name = $("#input_name").val();
    // 发送ajax请求
    $.ajax({
        url: "/api/student/query-name",
        method: "GET",
        data: {name: name} // 请求参数
    }).done(function (data) {
        console.log(data)
        let html = "";
        data.forEach((element, index) => {
            html += "<tr>"
            html += "<td>" + element.id + "</td>"
            html += "<td>" + element.name + "</td>"
            html += "<td>" + element.age + "</td>"
            html += "<td>" + (element.sex === 1 ? '男' : (element.sex === 2 ? '女' : '未知')) + "</td>"
            html += "<td>" + element.password + "</td>"
            html += "<td>" + element.sno + "</td>"
            //element.id 是一个动态值，每行数据的 id 都不同，需要通过字符串拼接插入到 HTML 中。
/*            html += "<td> <a href='#' onclick='showStuInsertOrUpdateDialog(" + element.id + ")' >编辑</a> &nbsp;&nbsp;" +
                "<a href='#' onclick='deleteStuById(" + element.id + ")' >删除</a></td>"
            html += "<tr>"*/
            // 添加操作按钮
            html += "<td>&nbsp;&nbsp;";
            html += "<button type='button' class='layui-btn layui-btn-sm layui-btn-primary' onclick='showStuInsertOrUpdateDialog(" + element.id + ")'>";
            html += "<i class='layui-icon layui-icon-edit'>&nbsp;编辑</i>";
            html += "</button> &nbsp;&nbsp;";
            html += "<button type='button' class='layui-btn layui-btn-sm layui-btn-danger' onclick='deleteStuById(" + element.id + ")'>";
            html += "<i class='layui-icon layui-icon-delete'>&nbsp;删除</i>";
            html += "</button>";

            html += "</td>";
            html += "</tr>";
        })

        $("#studentList").html(html)
    })
})

/**
 * 弹出 新增 或 更新 学生对话框
 */
let StuInsertLayerIndex; //新增学生对话框的句柄，用于关闭该弹出层
function showStuInsertOrUpdateDialog(id) {
    let title = '新增学生'; //默认是新增学生

    //id存在，即为修改学生信息
    if (id) {
        $("#stu-form-id").css("display", "block") //显示id字段
        title = '编辑学生'

        //读取学生信息，给修改表单并赋初值
        $.ajax({
            url: "/api/student/" + id,
            method: "GET",
        }).done(result => {
            console.log(result)

            //遍历 result对象 并将值填充到 StuFrom表单中的各个字段
            $.each(result, function (key, value) {
                //选择修改表单的对应的字段
                let field = $("#StuForm input[name='" + key + "']");

                if (field.is(":radio")) {
                    field.filter("[value='" + value + "']").prop("checked", true); //选择对应的单选按钮
                } else if (field.is(":checkbox")) {
                    // field.prop("checked", value === 'yes'); //选择对应的复选框
                    field.filter("[value='" + value + "']").prop("checked", true); //选择对应的复选框
                } else {
                    field.val(value); //给表单字段赋值
                }
            })
        })
    } else {
        $("#StuForm")[0].reset() //清空表单
        $("#stu-form-id").css("display", "none") //隐藏id字段
    }

    StuInsertLayerIndex = layer.open({
        type: 1,
        title: title,
        area: ['500px', 'auto'],
        content: $('#StuForm') //捕获层
    })
}

/**
 * 阻止表单默认提交(刷新整个页面)、调用提交方法-新增学生
 */
layui.use(function () {
    //阻止表单默认提交（刷新整个页面）
    //带有 lay-submit 属性的按钮被点击后，会触发 layui.form.on('submit(XXX)', ...) 事件，
    //其中 XXX 是通过 lay-filter 属性指定的过滤器名称,也就是这里的stu-form-submit
    layui.form.on('submit(stu-form-submit)', function (data) {
        event.preventDefault(); // 阻止表单默认提交

        //调用提交方法-新增/修改学生
        commitStuInsertOrUpdateDialog();
    })


})

/**
 * 提交表单
 * 新增、修改学生
 */
function commitStuInsertOrUpdateDialog() {
    let id = $("#stu-form-id").val() //获取学生表单中的id
    let formData = $("#StuForm").serialize(); //序列化表单数据
    console.log(formData)

    // 禁用确定按钮，防止重复提交
    $("#btn-stu-confirm").prop("disabled", true).addClass("layui-btn-disabled");


    // 定义通用的请求完成处理逻辑--解除按钮禁用状态
    const finalize = () => {
        //解除按钮禁用状态
        $("#btn-stu-confirm").prop("disabled", false).removeClass("layui-btn-disabled");
    };

    // 确定接口地址和请求方法
    //根据id是否存在，判断是否是修改学生信息
    const isUpdate = id != null && id !== "";
    //确定请求接口
    const url = isUpdate ? "/api/student/update" : "/api/student/add";
    //确定请求方法
    const method = isUpdate ? "PUT" : "POST";

    //1.验证表单是否合法（前端已验证）

    //2.将表单数据发送给服务器的对应的接口中，并把提交按钮变灰
    // 提交ajax请求
    $.ajax({
        url: url,
        method: method,
        data: formData // 请求参数
    })
        .done(result => {
            //3.读取并刷新学生信息页面
            loadAllStuMsg();

            //4.获取服务器返回结果，根据结果提示用户
            console.log(result);
            const successMessage = isUpdate ? "修改成功" : "新增成功";
            if (result.id) {
                layer.msg(successMessage);
            }

            //5.关闭弹出层
            if (StuInsertLayerIndex) {
                layer.close(StuInsertLayerIndex);
            }
        })
        .fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //这里处理错误逻辑
            alert("Error Occurred!");
        })
        .always(finalize); // 无论成功还是失败，都会解除按钮禁用状态

    //6.禁用确定按钮
    //$("#btn-stu-confirm").prop("disabled", true).addClass("layui-btn-disabled");

}

/**
 * 根据id删除学生信息
 */
function deleteStuById(id) {
    layer.confirm('是否确定删除？', {icon: 3}, function () {

        $.ajax({
            url: "/api/student/delete/" + id,
            method: "DELETE"
        }).done(result => {
            //刷新学生信息页面
            loadAllStuMsg();
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //这里处理错误逻辑
            layer.msg('删除失败！' + "Request failed: " + textStatus + " - " + errorThrown, {icon: 1});
            alert("Error Occurred!");
        })

        layer.msg('删除成功！', {icon: 1});

    }, function () {
        layer.msg('取消');
    });
}

/**
 * 提交表单(过于冗余，已弃用)
 * 新增、修改学生
 */
/*
function commitStuInsertOrUpdateDialog_discard() {
    let id = $("#stu-form-id").val() //获取学生表单中的id
    let formData = $("#StuForm").serialize(); //序列化表单数据
    console.log(formData)

    // 禁用确定按钮，防止重复提交
    $("#btn-stu-confirm").prop("disabled", true).addClass("layui-btn-disabled");


    // 定义通用的请求完成处理逻辑
    const finalize = () => {
        $("#btn-stu-confirm").prop("disabled", false).removeClass("layui-btn-disabled");
    };

    if (id != null && id !== "") {
        //修改学生信息
        //1.验证表单是否合法（前端已验证）
        //2.将表单数据发送给服务器的update接口中，并把提交按钮变灰
        $.ajax({
            url: "/api/templates/update",
            method: "PUT",
            data: formData // 请求参数
        }).done(result => {
                //3.读取并刷新学生信息页面
                loadAllStuMsg()

                //4.获取服务器返回结果，根据结果提示用户
                console.log(result)
                if (result.id) {
                    layer.msg("修改成功")
                }

                //5.关闭弹出层
                if (StuInsertLayerIndex) {
                    layer.close(StuInsertLayerIndex);
                }

            }
        ).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + "-" + errorThrown);
            //这里处理错误逻辑
            alert("Error Occurred!");
        }).always(finalize); // 无论成功还是失败，都会解除按钮禁用状态

    } else {
        //新增学生信息

        //1.验证表单是否合法（前端已验证）

        //2.将表单数据发送给服务器的insert接口中，并把提交按钮变灰

        $.ajax({
            url: "/api/templates/add",
            method: "POST",
            data: formData // 请求参数
        }).done(result => {
                //3.读取并刷新学生信息页面
                loadAllStuMsg()

                //4.获取服务器返回结果，根据结果提示用户
                console.log(result)
                if (result.id) {
                    layer.msg("新增成功")
                }

                //5.关闭弹出层
                if (StuInsertLayerIndex) {
                    layer.close(StuInsertLayerIndex);
                }

            }
        ).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + "-" + errorThrown);
            //这里处理错误逻辑
            alert("Error Occurred!");
        }).always(finalize); // 无论成功还是失败，都会解除按钮禁用状态
    }

    //6.禁用确定按钮
    //$("#btn-stu-confirm").prop("disabled", true).addClass("layui-btn-disabled");

}*/
